<template>
  <div class="data_screen_wrap pos_rel w_p_100 h_p_100 flex_col">
    <ware-house-title></ware-house-title>

    <div class="flex_row jc_spa_bet pw_50 flex_1">
      <div class="w_p_49">
        <div class="border_line pos_rel flex_col ai_cen">
          <div class="box_title pos_abs">库存展示</div>
          <div class="flex_row flex_wrap jc_spa_ard ai_cen w_p_100 m_t_25">
            <div class="box_num cols_7 m_t_25 m_b_25" v-for="(item,index) in 6" :key="index">
              <div class="num f_s_24">1000吨</div>
              <div class="m_t_10 text">{{ index + 1 }}号库房库存</div>
            </div>
          </div>
        </div>
        <div class="border_line pos_rel flex_col ai_cen m_t_50">
          <div class="box_title pos_abs">库存使用情况</div>
          <div class="flex_row flex_wrap jc_spa_ard ai_cen w_p_100 m_t_25">
            <div class="box_num cols_7 m_t_25 m_b_25" v-for="(item,index) in 6" :key="index">
              <el-progress type="circle" :percentage="25"></el-progress>
              <div class="m_t_10 text">{{ index + 1 }}号库房使用率</div>
            </div>
          </div>
        </div>
      </div>
      <div class="w_p_49 h_p_100" ref="right">
        <div class="border_line pos_rel flex_col ai_cen h_p_100">
          <div class="box_title pos_abs">库存情况</div>
          <div class="m_t_50" id="echarts"></div>
          <el-button class="pos_abs bottom_10 right_10" type="primary" @click="toDetails">查看库位详情></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WareHouseTitle from "../components/ware-house-title/index"
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme

export default {
  name: 'DateScreen',
  components: {
    WareHouseTitle,
  },
  data() {
    return {
      currentRole: ''
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.initChart()
  },
  methods: {
    toDetails() {
      this.$router.push('warehousePlanView')
    },
    initChart() {
      const width = this.$refs.right.offsetWidth

      this.chart = echarts.init(document.getElementById("echarts"), 'dark', {
        width,
        height: 500,
      })

      this.chart.setOption({
        dataset: {
          source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, '成品'],
            [57.1, 78254, '半成品'],
            [74.4, 41032, '原料'],
            [50.1, 12755, '包材'],
            [89.7, 20145, '设备'],
            [68.1, 79146, '库存物品'],
            [19.6, 91852, '库存物品21'],
            [10.6, 101852, '库存物品345'],
            [32.7, 20112, '库存物品22']
          ]
        },
        grid: {containLabel: true},
        xAxis: {name: 'amount'},
        yAxis: {type: 'category'},
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['High Score', 'Low Score'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#dd6b66',
              '#759aa0',
              '#e69d87',
              '#8dc1a9',
              '#ea7e53',
              '#eedd78',
              '#73a373',
              '#73b9bc',
              '#7289ab',
              '#91ca8c',
              '#f49f42']
          }
        },
        series: [
          {
            type: 'bar',
            label: { // 是否显示每一个柱状图的数据
              show: true
            },
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/styles/basic.scss";

.data_screen_wrap {
  background: url("../../assets/images/dataScreen/data_screen_bg.png") center/cover no-repeat;

  .border_line {
    border: 1px solid #747474;
    text-align: center;

    .box_title {
      display: inline-flex;
      margin-top: -20px;
      width: auto;
      padding: 10px 40px;
      color: #fff;
      background: #004395;
    }

    .box_num {
      color: #fff;

      .num {
        padding: 20px 0;
        background-color: #0099ff;
      }

      .text {
        color: #00b6ff;
      }
    }
  }
}
</style>
